<template>
    <el-dialog :before-close="closeDialog" :close-on-click-modal="false" :title="id===null?'新增':'修改'"
        :visible.sync="dialogVisible" align="left" width="80%" style="color: #000; width: 100%" @open="openDialog">
        <!-- （1）主页信息 -->
        <el-form :model="form" label-width="80px" size="small" :rules="rules" style="padding-right: 40px;">
            <!-- ! 添加：显示工单栏，修改：不显示 -->
            <el-form-item v-if="!form.id" label="工单号" label-width="150px" prop="workOrder">
                <el-input v-model.trim="form.workOrder" placeholder="请填入工单号"></el-input>
            </el-form-item>
            <el-form-item label="需求标题" label-width="150px" prop="demandTitle">
                <el-input v-model.trim="form.demandTitle" />
            </el-form-item>
            <el-form-item label="任务类型" label-width="150px" prop="demandType">

                <demand-select v-model="form['demandType']"></demand-select>
            </el-form-item>
            <el-form-item label="对端需求人员" label-width="150px" prop="sideDemandPerson">
                <el-input v-model.trim="form.sideDemandPerson" />
            </el-form-item>
            <el-form-item label="数据使用方接口人" label-width="150px" prop="useDataPerson">
                <el-input v-model.trim="form.useDataPerson" />
            </el-form-item>
            <el-form-item label="数据归属部门和产品" label-width="150px" prop="dataBelongDepart">
                <el-input v-model.trim="form.dataBelongDepart" />
            </el-form-item>
            <el-form-item label="需求人" label-width="150px" prop="demandPerson">
                <user-select v-model="form['demandPerson']" />
            </el-form-item>
            <el-form-item label="运营接口人" label-width="150px" prop="motionPerson">
                <user-select v-model="form['motionPerson']" ></user-select>
            </el-form-item>

            <el-form-item label="数据加工人" label-width="150px" prop="doDataPerson">
                <user-select v-model="form['doDataPerson']" ></user-select>
            </el-form-item>

            <el-form-item label="数据推送/接收人" label-width="150px" prop="pushDataPerson">
                <user-select v-model="form['pushDataPerson']" ></user-select>
            </el-form-item>

            <el-form-item label="需求状态" label-width="150px" prop="status">
              <el-select v-model="form.status">
                <el-option v-for="o in requireSelect" :key="o.key" :label="o.label" :value="o.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="沟通群类型" label-width="150px" prop="groupType">
              <el-select v-model="form.groupType">
                <el-option v-for="o in groupSelect" :key="o.key" :label="o.label" :value="o.value" />
              </el-select>
            </el-form-item>

            <!-- （2）详情信息 -->
            <el-form-item label="运营沟通群" label-width="150px" prop="motionWechat">
                <el-input v-model.trim="form.motionWechat" />
            </el-form-item>
            <el-form-item label="需求描述" label-width="150px" prop="demandDesc">
                <el-input v-model.trim="form.demandDesc" />
            </el-form-item>
        </el-form>

        <div style="height: 30px">
            <el-button v-if="id===null" style="float: right" type="primary" @click="create">提 交</el-button>
            <el-button v-if="id!==null" style="float: right" type="primary" @click="update">更 新</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {createRequire, detailRequire, updateRequire} from "@/api/dx/dx";
import UserSelect from "@/views/dx/userSelect";
import TaskGroupIdSelect from "@/views/dx/taskGroupIdSelect";
import DemandSelect from "@/views/dx/demandSelect";
export default {
        name: "UpsertDialog",
        components: {TaskGroupIdSelect, UserSelect,DemandSelect},
        props: {
            dialogVisible: { type: Boolean, default: false },
            id: { type: Number, default: null }
        },

        data() {
            return {
                form: {},
                requireSelect: [{ key: 0, value: 0, label: "下线" }, { key: 1, value: 1, label: "上线" }],
                groupSelect: [{ key: 1, value: "微信", label: "微信" }, { key: 2, value: "企微", label: "企微" },{ key: 3, value: "钉钉", label: "钉钉" }],
                rules: {
                    workOrder: [{ required: true, message: '工单不能为空', trigger: 'blur' }],
                    demandTitle: [{ required: true, message: '需求标题不能为空', trigger: 'blur' }],
                    demandType: [{ required: true, message: '任务类型不能为空', trigger: 'blur' }],
                    sideDemandPerson: [{ required: true, message: '对端需求人员不能为空', trigger: 'blur' }],
                    useDataPerson: [{ required: true, message: '使用方接口人不能为空', trigger: 'blur' }],
                    dataBelongDepart: [{ required: true, message: '数据归属部门和产品不能为空', trigger: 'blur' }],
                    demandPerson: [{ required: true, message: '需求人不能为空', trigger: 'blur' }],
                    pushDataPerson: [{ required: true, message: '数据推送人/接收人不能为空', trigger: 'blur' }],
                    groupType: [{ required: true, message: '沟通群类型不能为空', trigger: 'blur' }],
                    motionWechat: [{ required: true, message: '运营沟通群不能为空', trigger: 'blur' }],
                    demandDesc: [{ required: true, message: '需求描述不能为空', trigger: 'blur' }],
                    motionPerson: [{ required: true, message: '运营接口人不能为空', trigger: 'blur' }],
                    doDataPerson: [{ required: true, message: '数据加工人不能为空', trigger: 'blur' }],
                },
              onLineState: false
            }
        },


        methods: {

            create() {
                if (!this.form.workOrder) {
                    this.$message({ message: "请输入工单号!", type: "fail", trigger: 'blur' })
                    return false;
                }
                if (!this.form.demandTitle) {
                    this.$message({ message: "请输入需求标题!", type: "fail", trigger: 'blur' })
                    return false;
                }
                createRequire(this.form).then(() => {
                    this.$message({ message: "添加成功", type: "success" })
                    this.closeDialog()
                })
            },

            update() {
                if (!this.form.demandTitle) {
                    this.$message({ message: "请输入需求标题!", type: "fail", trigger: 'blur' })
                    return false;
                }
                updateRequire(this.form).then(() => {
                    this.$message({ message: "修改成功", type: "success" })
                    this.closeDialog()
                })
            },

            openDialog() {
                if (this.id === null) {
                    this.form = {}
                } else {
                    detailRequire(this.id).then(res => {
                        this.form = res.data
                    })
                }
            },

            closeDialog() {
                this.$emit("closeDialog")
            },
        }
    }
</script>

<style scoped>

</style>
